<template>
    <div>
        <h3 style="padding: 10px 10px;">学员管理</h3>
        <hr>
        <!-- 表单-->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">

            <el-form-item label="学员状态">
                <el-select v-model="formInline.region" placeholder="请选择" style="width: 170px;">
                    <el-option label="启用" value="启用"></el-option>
                    <el-option label="禁用" value="禁用"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="学生名称">
                <el-input v-model="formInline.user" placeholder="审批人" style="width: 170px;" ></el-input>
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="formInline.phone" placeholder="手机号" style="width: 150px;" ></el-input>
            </el-form-item>

            <el-form-item>
                <el-button @click="allsearch">搜索</el-button>
                <el-button>重置</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">新增学院</el-button>
                <el-button type="primary">批量导入</el-button>
                <el-button type="primary">批量导出</el-button>
                <el-button type="primary">查看报表</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column fixed prop="date"  width="150"  type="selection">
            </el-table-column>
            <el-table-column fixed prop="nickname" label="学生名称" >
                <template slot-scope="scope">
                        <img :src="scope.row.avatar" class="im" alt="">
                    {{scope.row.nickname}}
                </template>
            </el-table-column>
            <el-table-column prop="mobile" label="手机号" >
            </el-table-column>
            <el-table-column prop="status" label="状态" >
            </el-table-column>
            <el-table-column prop="created_at" label="创建时间" >
                <template slot-scope="scope">
                        {{new Date(Number(scope.row.created_at)).toLocaleString()}}
                </template>
            </el-table-column>
          
            <el-table-column fixed="right" label="操作" >
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-input style="width: 40px;" v-model="ye" @blur="pages" />
        <ul>
            <li v-for="item,index in page" @click="huan(item)">{{item}}</li>
        </ul>
    </div>
</template>
<script>
import axios from 'axios'
import data from '../assets/list.json';
export default {
    data() {
        return {
            page:[],
            ye:'',
            // list:data,
             list:[],
            tableData:[],
            formInline: {
                user: '',
                region: '',
                phone:'',
            }
        }
    },
    created() {
      console.log(this.list); 
    },
    mounted() {
        this.xr()
    },
    methods: {
        //点击页码
        huan(item){
            this.list=data
            let tou=(item-1)*this.ye
            let wei=item*this.ye
            this.tableData=this.list.slice(tou,wei)
        },
        //失焦页码框
        pages(){
            this.page=[]
            this.list=data
            let news=Math.ceil(this.list.length/this.ye)
        for (let i = 1; i <= news; i++) {
             this.page.push(i)
            }
        this.tableData=this.list.slice(0,this.ye)
        },


        //状态搜索
        ztsearch(){
            this.tableData=this.list.filter(item=>{
               return item.status==this.formInline.region
            })
        },
        //名字搜索
        namesearch(){
            console.log(121);
            this.tableData=this.list.filter(item=>{
                return item.nickname.indexOf(this.formInline.user)>-1
            })
        },
        //手机号搜索
        phone_search(){
            this.tableData=this.list.filter(item=>{
                return item.mobile.indexOf(this.formInline.phone)>-1
            })
        },
        //状态和名字搜索
        search_zt_name(){
            let one=this.list.filter(item=>{
                return item.status==this.formInline.region
            })
            this.tableData=one.filter(item=>{
               return item.nickname.indexOf(this.formInline.user)>-1
            })
            console.log(this.tableData);
        },
        //状态和手机号搜索
        search_zt_phone(){
            let one=this.list.filter(item=>item.status==this.formInline.region)
            this.tableData=one.filter(item=>item.mobile.indexOf(this.formInline.phone)>-1)
            console.log(one);
        },
        //名字和手机号搜索
        search_name_phone(){
            let one=this.list.filter(item=>item.nickname.indexOf(this.formInline.user)>-1)
            this.tableData=one.filter(item=>item.mobile.indexOf(this.formInline.phone)>-1)
        },
        //三个一起搜索
        san_search(){
            console.log(123);
            let one=this.list.filter(item=>item.status==this.formInline.region)
            let two=one.filter(item=>item.nickname.indexOf(this.formInline.user)>-1)
            this.tableData=two.filter(item=>item.mobile.indexOf(this.formInline.phone)>-1)
        },
        //所有搜索
        allsearch(){
            let phone=this.formInline.phone
            let user=this.formInline.user
            let region=this.formInline.region


         debugger   //这个可以看到下一步的进行
 
            if(region||(region===0&&!user&&!phone)){
                this.san_search()
            }else if(!region&&user&&!phone){
                this.namesearch()
            }else if(!region&&!user&&phone){
                this.phone_search()
            }


        //    switch (region, user, phone) {
        //         //  姓名 状态  手机
        //         case (region || region === 0) && user && phone:
        //             this.statenm()
        //             break;
        //         // 姓名 状态
        //         case (region || region === 0) && user:
        //             this.statename()
        //             break;
        //         //状态 手机
        //         case (region || region === 0) && phone:
        //             this.statemobile()
        //             break;
        //         //姓名 手机
        //         case user && phone:
        //             this.namemobile()
        //             break;
        //         // 手机
        //         case phone:
        //             this.sj()
        //             break;
        //         // 姓名
        //         case user:
        //             this.student()
        //             break;
        //         // 状态
        //         case (region || region === 0):
        //             this.state()
        //             break;
        //     }


        },
       
        //渲染
        xr(){
            axios.get('/params/table').then(res=>{
                  for (let i = 0; i < res.data.data.data.length; i++) {
               if(res.data.data.data[i].status==0){
                res.data.data.data[i].status='禁用'
            }else{
                res.data.data.data[i].status='启用'
            }   
            }
                console.log(res);
                this.list=res.data.data.data
                this.tableData=res.data.data.data
            })
           
            // for (let i = 0; i < this.list.length; i++) {
            //    if(this.list[i].status==0){
            //     this.list[i].status='禁用'
            // }else{
            //     this.list[i].status='启用'
            // }   
            // }
            //   this.tableData=this.list
        }
    }
}
</script>
<style scoped>
li{
   list-style: none;
   padding: 10px 10px;
   margin: 10px 10px;
    border: 1px solid #ccc;
}
ul{
 display: flex;
flex-direction: row;
}
.im{
    width: 40px;
    height: 40px;
}
</style>